<template>
    <div id="gunView">
      <div class="banner"><img :src="allview.img" alt=""></div>
      <div class="view-title">
        <p>{{allview.title}} [{{allview.g.title}}]</p>
        <p class="time">
          <i class="iconfont icon-shijian11"> {{allview.g.date}}</i>
          <i class="iconfont icon-map"> {{allview.g.region}} | {{allview.g.title}}</i>
          <span @click="addLook" v-show="allview.gs.length > 1">更多排期></span>
        </p>
      </div>
      <div class="main-xian"></div>
      <div class="main-price">
        <p class="main-price-one">
          <span>众筹最低价：￥{{allview.g.low_price}}</span>
          <span>市场参考价：<del>￥{{allview.reference_price}}</del></span>
        </p>
        <div class="main-number">
          <div class="progress" :style="{width:progress+'%'}"></div>
          <div class="main-yuan" :style="{left: zleft + '%'}"></div>
          <div class="main-yuan" style="left: 100%"></div>
          <span class="main-num-one" :style="{left: zleft + '%'}">{{allview.g.min_person}}人</span>
          <span class="main-num-two">{{allview.g.max_person}}人</span>
          <div class="main-tishi" :style="{left:progress+'%',marginLeft: -mleft + 'px'}" id="dv1" v-show="progress<87 && progress >10">
            <span>{{allview.g.current_person}}人已约</span>
          </div>
          <div class="main-tishi" v-if="progress >= 87" style="right: -6px">
            <span>{{allview.g.current_person}}人已约</span>
          </div>
          <div class="main-tishi" v-if="progress <=10" style="left: -6px">
            <span>{{allview.g.current_person}}人已约</span>
          </div>
          <span class="main-1" :style="{left:progress+'%'}"></span>
        </div>
        <div class="clear"></div>
        <div class="main-number-type">
          <p class="type-1">
            <span>￥{{allview.cost}}</span><br/>
            <span>课程总成本</span>
          </p>
          <p class="type-1">
            <span>￥{{nowprice}}</span><br/>
            <span>当前价</span>
          </p>
          <p class="type-1">
            <span>{{allview.g.current_person}}/{{allview.g.max_person}}人</span><br/>
            <span>已约学友</span>
          </p>
        </div>
        <div class="clear"></div>
        <div class="main-number-type" style="margin-top: 15px;text-align: center">
            <i class="iconfont icon-wenhao"> 众筹人数越多，人均学费越低</i>
        </div>
      </div>
      <div class="main-xian"></div>
      <div :class="{topfix: isFix}">
        <div class="main-tab">
          <ul>
            <a href="" @click.prevent="custormAnchor('goview')"><li :class="{active: colIndex === 0}" @click="addTab(0)">课程介绍</li></a>
            <a href="" @click.prevent="custormAnchor('gosignup')"><li :class="{active: colIndex === 1}" @click="addTab(1)">评价<span style="color: #f35a5a" v-show="allview.comments.length>0">({{allview.comments.total}})</span></li></a>
            <a href="" @click.prevent="custormAnchor('gomessage')"><li :class="{active: colIndex === 2}" @click="addTab(2)">本团学友</li></a>
          </ul>
          <p class="xian"></p>
          <div class="clear"></div>
        </div>
      </div>
      <div class="main-box">
        <p class="title"><span></span>大咖简介</p>
        <div class="main-user" v-for="(i, index) in allview.teachers" :key="index">
          <img :src="i.img" alt="" class="m-img">
          <div class="m-name">
            <span>{{i.title}}</span><br/>
            <p class="type-1">
              <span style="color: #0033a0">{{i.course_count}}次</span><br/>
              <span>开课</span>
            </p>
            <p class="type-1">
              <span style="color: #0033a0">{{i.student_count}}次</span><br/>
              <span>学过</span>
            </p>
          </div>
          <div class="clear"></div>
          <div class="main-intro" v-show="i.intro !== ''">{{i.intro}}</div>
        </div>
      </div>
      <div class="main-xian"></div>
      <div class="main-box">
        <div id="goview"></div>
        <p class="title"><span></span>课程介绍</p>
        <div class="main-intro-one"><Content :content="allview.detail"></Content></div>
      </div>
      <div class="main-xian"></div>
      <div class="main-box">
        <div id="gosignup"></div>
        <p class="title"><span></span>评价</p>
        <div class="main-user-1" v-for="(i, index) in allview.comments.list" :key="index">
          <img :src="i.img" alt="">
          <p class="main-a">
            <span style="color: #0033a0">{{i.truename}}</span><br/>
            <span>{{i.company}}</span>
          </p>
          <p class="m-prise">
            <!--<i class="iconfont icon-iconfontappreciate"> 10</i>-->
          </p>
          <div class="clear"></div>
          <div class="main-intro-two">{{i.content}}</div>
          <div class="time">{{i.date}}</div>
        </div>
        <div class="m-more" @click="goEvaluate" v-if="allview.comments.total !== undefined && allview.comments.total > 0">查看更多课后感 <i class="iconfont icon-fanhui"></i></div>
        <div class="main-no" v-else>暂无评价</div>
      </div>
      <div class="main-xian"></div>
      <div class="main-box">
        <div id="gomessage"></div>
        <p class="title"><span></span>本团学友</p>
        <div class="v-user">
          <ul>
            <li v-for="(i, index) in allview.users.list" :key="index">
              <img :src="i.img" alt=""><br/>
              <span>{{i.truename}}</span><br/>
              <span>{{i.company}}</span>
            </li>
          </ul>
          <div class="clear"></div>
          <div class="m-more" @click="goMember" v-if="allview.users.total !== undefined && allview.users.total > 0"><span>全部学友({{allview.users.total}})</span> <i class="iconfont icon-fanhui"></i></div>
          <div class="main-no" v-else>暂无学友</div>
        </div>
      </div>
      <div class="main-xian"></div>
      <div class="main-box">
        <p class="title"><span></span>往期瞬间</p>
        <div class="main-intro-one"><Content :content="allview.review"></Content></div>
        <!--<div class="main-no">暂无精彩瞬间</div>-->
      </div>
      <div class="tips">侃侃电商学院</div>
      <div class="feedback" @click="gofeed">问题反馈</div>
      <!--客服-->
      <div class="main-kefu" v-show="isKefu">
        <div class="msk"></div>
          <div v-show="islook" style="position: relative">
            <div class="kefu-all">
              <div style="height: 30px"></div>
              <span>{{allview.cs.title}}</span><br/>
              <img :src="allview.cs.img" alt="">
            </div>
            <i class="iconfont icon-cha1" @click="close"></i>
          </div>
        <div class="main-more" v-show="isSelect">
            <p class="title">
              <span>请选择适合您的排期课程</span><br/>
              <span>如遇到席位爆满，可联系班主任候补转正</span>
              <span class="iconfont icon-untitled94" @click="closeselect"></span>
            </p>
            <ul>
              <li v-for="(i, index) in allview.gs" :key="index" @click="goTuan(i.id)">
                <span class="iconfont icon-gou" :class="{active: i.id === parseInt(gid)}"></span>
                <span>{{i.title}}</span>
                <span>{{i.region}}</span>
                <span>{{i.date}}</span>
              </li>
            </ul>
            <p class="mbtn" @click="select">切换到此排期</p>
        </div>
      </div>
      <!--底部-->
      <div>
        <div class="tab-ber-bottom" @click.stop></div>
        <div class="tab-ber" @click.stop>
          <div class="tab-ber-once" @click="tocurrent(0)">
            <i class="iconfont icon-shouye"></i><br/>
            <span>首页</span>
          </div>
          <div class="tab-ber-once" @click="tocurrent(1)">
            <i class="iconfont icon-huifu"></i><br/>
            <span>客服</span>
          </div>
          <div class="tab-ber-once tab-once" @click="tocurrent(2)">
            <span>预订报名</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import Content from '../public/editor/content'
import { Toast } from 'mint-ui'
export default {
  name: 'view-1',
  components: {
    Content},
  data () {
    return {
      progress: 33,
      maxright: '',
      isFix: false,
      isSelect: false,
      isKefu: false,
      islook: false,
      oneBox: '',
      twoBox: '',
      threeBox: '',
      nowprice: '',
      mleft: '',
      zleft: '',
      gid: '',
      colIndex: 0,
      scrollH: '',
      allview: {
        g: {},
        teachers: [],
        gs: [],
        cs: [],
        users: {
          list: [],
          total: ''
        },
        comments: []
      }
    }
  },
  watch: {
    isKefu () {
      if (this.isKefu === true) {
        document.body.setAttribute('id', 'bodystyle')
      } else {
        document.body.removeAttribute('id', 'bodystyle')
      }
    },
    $route (to, from) {
      window.location.reload()
    }
  },
  mounted () {
    this.$nextTick(() => {
      let dv1 = document.getElementById('dv1')
      this.mleft = dv1.getBoundingClientRect().width / 2
    })
    window.addEventListener('scroll', this.handleScroll)
    this.oneBox = document.getElementsByClassName('main-box')[0].getBoundingClientRect().height
    this.twoBox = document.getElementsByClassName('main-box')[1].getBoundingClientRect().height
    this.threeBox = document.getElementsByClassName('main-box')[2].getBoundingClientRect().height
    this.gid = this.$route.params.gid
    this.getView()
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
    document.documentElement.scrollTop = 0
    window.pageYOffset = 0
    document.body.scrollTop = 0
  },
  methods: {
    gofeed () {
      this.$router.push('/users/feedback')
    },
    closeselect () {
      this.isSelect = false
      this.isKefu = false
    },
    addLook () {
      this.isKefu = true
      this.isSelect = true
    },
    goTuan (id) {
      this.gid = id
    },
    select () {
      this.$router.push('/view/' + this.$route.params.id + '/' + this.gid)
    },
    getView () {
      console.log(this.$route.params)
      let that = this
      this.$g.ajax({
        path: 'courses/view/' + this.$route.params.id + '/' + this.$route.params.gid,
        method: 'post',
        data: that.searchmsg,
        cbSuccess: function (data) {
          that.allview = data.memo
          that.progress = that.allview.g.current_person / that.allview.g.max_person * 100
          that.zleft = that.allview.g.min_person / that.allview.g.max_person * 100
          that.nowprice = parseFloat(that.allview.cost / (that.allview.g.current_person < 1 ? 1 : that.allview.g.current_person)).toFixed(2)
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    handleScroll () {
      this.scrollH = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollH > 500) {
        this.isFix = true
        if (this.scrollH > 500 + this.oneBox + 30 + this.twoBox) {
          this.colIndex = 1
        }
        if (this.scrollH > 500 + this.oneBox + 40 + this.twoBox + this.threeBox) {
          this.colIndex = 2
        }
      } else {
        this.isFix = false
        this.colIndex = 0
      }
    },
    custormAnchor (anchorName) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName)
      console.log(anchorElement)
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) { anchorElement.scrollIntoView() }
    },
    tocurrent (val) {
      if (val === 0) {
        this.$router.push('/')
      }
      if (val === 1) {
        this.isKefu = true
        this.islook = true
      }
      if (val === 2) {
        if (parseInt(this.allview.g.max_person) === parseInt(this.allview.g.current_person)) {
          Toast({
            message: '人数已满,请联系客服',
            duration: 1000
          })
          this.isKefu = true
          this.islook = true
          return false
        }
        if (this.allview.g.status === 'success') {
          Toast({
            message: '该团已成团，请联系客服进行报名',
            duration: 1000
          })
          this.isKefu = true
          this.islook = true
          return false
        }
        this.$router.push('/signup/' + this.$route.params.id + '/' + this.$route.params.gid)
      }
    },
    close () {
      this.isKefu = false
      this.islook = false
    },
    addTab (val) {
      this.colIndex = val
    },
    goEvaluate () {
      this.$router.push('/evaluate/' + this.$route.params.id)
    },
    goMember () {
      this.$router.push('/member/' + this.$route.params.id + '/' + this.allview.g.title + '/' + this.$route.params.gid)
    }
  }
}
</script>

<style scoped lang="scss">
  .tips{
    text-align: center;
    padding-top: 20px;
    font-size: 22px;
    font-weight: bold;
    color: #d4d8d8;
    background: rgba(244,244,244,0.8);
  }
  .feedback{
    text-align: right;
    font-size: 12px;
    padding-right: 14px;
    color: #ababab;
    background: rgba(244,244,244,0.8);
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .banner{
    width: 100%;
    height: 220px;
    img{
      width: 100%;
      height: 220px;
    }
  }
  .view-title{
    padding: 8px 3%;
    font-size: 15px;
    word-break: break-all;
    word-wrap: break-word;
    p{
      margin-top: 5px;
    }
    .time{
      color: #ff9800;
      font-size: 12px;
      i{
        font-size: 12px!important;
        margin-right: 10px;
      }
      span{
        display: inline-block;
        background: #ff9800;
        color: white;
        border-radius: 10px;
        height: 20px;
        padding: 0 8px;
        line-height: 20px;
        float: right;
      }
    }
  }
  .main-xian{
    width: 100%;
    height: 5px;
    background: #ecedee;
    margin: 5px 0;
  }
  .main-price{
    padding: 8px 3%;
    .main-price-one{
      span:nth-of-type(1){
        font-weight: bold;
        font-size: 16px;
        color: #ff9800;
      }
      span:nth-of-type(2){
        float: right;
        font-size: 12px;
        color: #999999;
      }
    }
    .main-number{
      width: 100%;
      height: 5px;
      border-radius: 2.5px;
      background: #dddddd;
      margin-top: 50px;
      position: relative;
      .main-tishi{
        position: absolute;
        background: #ff9800;
        padding: 3px 7px;
        color: white;
        font-size: 12px;
        border-radius: 5px;
        top: -35px;
      }
      .main-1{
        display: inline-block;
        width:0;
        height:0;
        border-width:5px 5px 0;
        border-style:solid;
        border-color:#ff9800 transparent transparent;/*灰 透明 透明 */
        position: absolute;
        top: -14px;
        margin-left: -5px;
      }
      .main-num-one{
        color: #ff9800;
        font-size: 12px;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        top: 12px;
      }
      .main-num-two{
        color: #ff9800;
        font-size: 12px;
        position: absolute;
        right: -5px;
        top: 12px;
      }
      .progress{
        background-color: #ff9800;
        border-radius: 2.5px;
        height: 5px;
        animation: toright 1s;
        position: relative;
      }
      @keyframes toright {
        from {
          left: -50%;
        }
        to {
          left: 0;
        }
      }
      .main-yuan{
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        border: 2px solid #ddd;
        /*left: 50%;*/
        margin-left: -7px;
        top: -5px;
      }
      .main-yuan:nth-last-of-type(1){
        right: 0;
        left: 100%;
      }
    }
    .main-number-type{
      margin-top: 40px;
      font-size: 12px;
      .type-1{
        float: left;
        width: 32%;
        height: 40px;
        border-right: 1px solid #ddd;
        color: #999999;
        text-align: center;
        line-height: 20px;
      }
      .type-1:nth-last-of-type(1){
        border: none;
      }
      .type-1 span:nth-of-type(1){
        color: #ff9800;
      }
      i{
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .topfix{
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
  }
  .main-tab{
    font-size: 13px;
    color: #666;
    position: relative;
    background: white;
    a{
      background: white;
    }
    li{
      display: inline-block;
      width: 33.3%;
      float: left;
      text-align: center;
      line-height: 30px;
    }
    .active{
      color: #0033a0;
      border-bottom: 2px solid #0033a0;
      position: relative;
      z-index: 10;
    }
    .xian{
      height: 2px;
      background: #ecedee;
      position: absolute;
      top: 30px;
      width: 100%;
    }
  }
  .main-box{
    padding: 8px 3%;
    .title{
      margin-top: 10px;
      font-size: 14px;
      border-bottom: 1px solid #ecedee;
      padding-bottom: 10px;
      span{
        border-left: 3px solid #0033a0;
        margin-right: 10px;
      }
    }
    .main-user{
      /*height: 90px;*/
      width: 100%;
      margin-top: 20px;
      .m-img{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        float: left;
        margin-right: 50px;
      }
      .m-name{
        float: left;
        width: 60%;
        .type-1{
          float: left;
          width: 40%;
          height: 40px;
          border-right: 1px solid #ddd;
          color: #999999;
          text-align: center;
          line-height: 20px;
          margin-top: 8px;
          font-size: 12px;
        }
        .type-1:nth-last-of-type(1){
          border: none;
        }
      }
      .main-intro{
        background: #f2f4f5;
        padding: 10px 15px;
        margin-top: 20px;
        font-size: 13px;
        color: #333;
        line-height: 24px;
        border-radius: 5px;
      }
    }
    .main-intro-one{
      font-size: 13px;
      color: #333;
      line-height: 24px;
      margin-top: 20px;
    }
    .main-user-1{
      width: 100%;
      margin-top: 20px;
      border-bottom: 1px solid #f2f4f5;
      img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        float: left;
      }
      .main-a{
        float: left;
        line-height: 20px;
        font-size: 12px;
        color: #999999;
        margin-left: 10px;
      }
      .m-prise{
        float: right;
        i{
          font-size: 12px;
          color: #999999;
        }
      }
      .main-intro-two{
        line-height: 24px;
        font-size: 13px;
        color: #333;
        padding-left: 40px;
        word-break: break-all;
        word-wrap: break-word;
      }
      .time{
        line-height: 40px;
        font-size: 13px;
        color: #999999;
        padding-left: 40px;
      }
    }
    .m-more{
      font-size: 12px;
      color: #0033a0;
      margin-top: 15px;
      i{
        font-size: 12px;
        float: right;
        transform:rotate(180deg);
        -ms-transform:rotate(180deg); /* Internet Explorer */
        -moz-transform:rotate(180deg); /* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg); /* Opera */
      }
    }
    .v-user{
      li{
        display: inline-block;
        width: 33.3%;
        float: left;
        text-align: center;
        line-height: 20px;
        margin-top: 20px;
        img{
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: inline-block;
        }
        span{
          display: inline-block;
          font-size: 12px;
          color: #999999;
        }
        span:nth-of-type(1){
          color: #383838;
        }
      }
    }
    .main-no{
      text-align: center;
      line-height: 50px;
      color: #999999;
      font-size: 13px;
    }
  }
  .tab-ber-bottom {
    height: 48px;
  }
  .tab-ber {
    height: 48px;
    border-top:1px solid #eee;
    background:#ffffff;
    color:#999999;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    .tab-once{
      width: 69%!important;
      border: none!important;
      span{
        display: inline-block;
        width: 96%;
        background: #0033a0;
        color: white;
        line-height: 40px;
        font-size: 14px!important;
        border-radius: 5px;
        margin-top: 4px;
        margin-left: 2%;
      }
    }
    .tab-ber-once {
      width: 15%;
      height: 48px;
      float: left;
      text-align: center;
      box-sizing: border-box;
      border-right: 1px solid #eee;
      i{
        display: inline-block;
        margin-top: 5px;
      }
      span {
        font-size: 12px;
      }
    }
    .fontColor {
      color: #0033a0;
    }
  }
  .main-kefu{
    width: 100%;
    height: 100%;
    background: rgba(178,178,178,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    text-align: center;
    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
    .main-more{
      width: 100%;
      background: white;
      min-height: 100px;
      position: absolute;
      bottom: 0;
      .mbtn{
        width: 94%;
        line-height: 40px;
        border-radius: 5px;
        float: left;
        margin-left: 3%;
        margin-bottom: 10px;
        color: white;
        background: #008ee5;
        font-size: 13px;
      }
      .title{
        margin-top: 15px;
        position: relative;
        padding: 0 3%;
        span:nth-of-type(1){
          font-weight: 700;
          font-size: 16px;
        }
        span:nth-of-type(2){
          font-size: 13px;
          color: #666;
        }
        span:nth-of-type(3){
          position: absolute;
          left: 3%;
          top: 0;
          color: #666;
          font-size: 14px;
        }
      }
      li{
        display: inline-block;
        line-height: 50px;
        width: 94%;
        border-bottom: 3px solid #ededed;
        padding: 0 3%;
        color: #666;
        .active{
          color: #0033a0!important;
        }
        span{
          float: left;
          padding: 0 5%;
        }
        span:nth-of-type(1){
          color: #999999;
          padding: 0;
        }
      }
      li:nth-last-of-type(1){
        border: none;
      }
    }
    .kefu-all{
      width: 70%;
      height: 50%;
      background: white;
      margin: auto;
      margin-top: 40%;
      text-align: center;
      padding: 20px 5%;
      line-height: 20px;
      img{
        width: 60%;
        height: 60%;
        margin-top: 20px;
      }
    }
    i{
      font-size: 40px;
      color: white;
      line-height: 60px;
    }
  }
</style>
<style>
  #bodystyle{
    height: 100%;
    overflow: hidden;
  }
</style>
